<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,user-scalable=no"/>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_603026_2npj5yaujta10pb9.css" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_604125_a6viixbot7wuerk9.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
	</head>
	<body>
		<div class="indexMobile">
			<!--头部-->
			<header>
				<div class="logo fl"><img src="img/logo.png"/></div>
				<div class="slCity fr">
					<select name="city">
						<option style="width: 90px;" value="广州">广州</option>
						<option value="深圳">深圳</option>
						<option value="武汉">武汉</option>
					</select>
				</div>
				<div class="search">
					<input type="search" placeholder="请输入商品名称" class="searchInp" />
					<i class="iconfont icon-fangdajing"></i>
				</div>
			</header>
			<!--主体内容-->
			<section>
				<!--轮播图-->
				<div class="kv">
					<div class="swiper-container">
						<ul class="swiper-wrapper">
							<li class="swiper-slide"><img src="img/home/导航大图_02.jpg"/></li>
							<li class="swiper-slide"><img src="img/home//导航大图_02.jpg"/></li>
							
						</ul>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>
						<!-- 如果需要滚动条 -->
						<!--<div class="swiper-scrollbar"></div>-->
					</div>
				</div>
				<!--优惠团购-->
				<div class="grouP">
					<div class="clearfix allTitle">
						<h3 class="title fl">
							<img src="img/优惠-左-1.png"/>
							<span>优惠团购</span>
						</h3>
						<p class="more fr">
							<span>更多</span>
							<img src="img/更多-2.png"/>
							
						</p>
					</div>
					<ul class="discountInfo">
						<li><a href=""><img src="img/images/li_03.jpg"/></a></li>
						<li><a href=""><img src="img/images/li_05.jpg"/></a></li>
						<li><a href=""><img src="img/images/li_10.jpg"/></a></li>
						<li><a href=""><img src="img/images/li_12.jpg"/></a></li>
					</ul>
				</div>
				<!--猜你喜欢-->
				<div class="like">
					
					<div class="clearfix allTitle">
						<h3 class="title fl">
							<img src="img/优惠-左-1.png"/>
							<span>优惠团购</span>
						</h3>
						<p class="more fr">
							<span>更多</span>
							<img src="img/更多-2.png"/>
							
						</p>
					</div>
					
					<ul class="goodsDesc">
						<li>
							<div class="goodsImg fl">
								<a href="Detailed.html"><img src="img/home/详细_03.jpg"/></a>
							</div>
							<div class="goodsInfo ">
								<h3>
									<span>万岁寿司(正佳店)</span>
									<span>&lt;100m</span>
								</h3>
								<p class="taocan">[100店通用] 双人套餐</p>
								<p>
									<span>￥88.00</span>
									<span>已售1000</span>
								</p>
							</div>
						</li>
						<li>
							<div class="goodsImg fl">
								<a href="#"><img src="img/home/详细_06.jpg"/></a>
							</div>
							<div class="goodsInfo ">
								<h3>
									<span>周黑鸭(正佳店)</span>
									<span>&lt;100m</span>
								</h3>
								<p class="taocan">[100店通用] 双人套餐</p>
								<p>
									<span>￥88.00</span>
									<span>已售1000</span>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</section>
			
			<!--底部导航-->
			<footer>
				<ul class="nav">
					<li>
						
						<a href="index.html"> <i class="iconfont icon-msnui-home"></i></a>
						<a href="index.html">首页</a>
					</li>
					<li>
							
						<a href="classification.html"> <i class="iconfont icon-fenlei"></i></a>
						<a href="classification.html">分类</a>
					</li>
					<li>
							
						<a href="faxian.html"> <i class="iconfont icon-faxian"></i></a>
						<a href="faxianhtml">发现</a>
						
					</li>
					<li>
						<a href="myId.html"> <i class="iconfont icon-wode"></i></a>
						<a href="myId.html">我的</a>
						
					</li>
				</ul>
			</footer>
		</div>
		<script type="text/javascript">
			document.body.style.height = document.body.clientHeight+"px";
			
		</script>
			<!--轮播js-->
			<script type="text/javascript" src="js/swiper.min.js">
			</script>
			<script>
				var mySwiper = new Swiper('.swiper-container', {
					//				direction: 'vertical',
					//循环
					loop: true,
					autoplay: true,
					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},
	
					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
	
					// 如果需要滚动条
					scrollbar: {
						el: '.swiper-scrollbar',
					},
				})
				//鼠标滑过pagination控制swiper切换
				for(i = 0; i < mySwiper.pagination.bullets.length; i++) {
					mySwiper.pagination.bullets[i].index = i+1
					mySwiper.pagination.bullets[i].onmouseover = function() {
						mySwiper.slideTo(this.index);
					};
				}
			</script>
	</body>
</html>
